<template>
  <div class="serve-list">
    <div class="header">
      <div class="left">
        <img src="../../assets/img/authorization.png" alt="" />
        <div class="detail">
          <p class="title">我的授权</p>
          <div class="desc">
            <!-- <span>服务器地址：localhost:20002</span> -->
            <span>加密锁序列号： {{ id }}</span>
          </div>
        </div>
      </div>
      <div class="btn-list">
        <a-button @click="openModal">续订</a-button>
        <a-button @click="reset">刷新</a-button>
      </div>
    </div>
    <div class="content">
      <div class="table-title">已购资源：</div>
      <!-- <div class="search">
				<div class="info">
					<span>已购服务</span>
					<span>（产品：1）</span>
				</div>
				<a-select
					ref="select"
					style="width: 47%"
					v-model:value="value1"
				>
					<a-select-option value="jack">产品</a-select-option>
					<a-select-option value="lucy">数据</a-select-option>
				</a-select>
			</div> -->
      <div class="detail-content">
        <a-table
          bordered
          :columns="columns"
          :data-source="list"
          rowClassName="tableRow"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'name'">
              <span class="item">{{ record.name }}</span>
            </template>
            <template v-if="column.key === 'qy'">
              <div v-for="item in record.qy">
                <p class="qy-text item">{{ item }}</p>
              </div>
              <div v-for="item in record.key">
                <div class="auth-code item" v-if="item.type == 4">
                  授权码：{{ item.key }}
                  <img class="copy-icon" src="../../assets/img/fuzhi.png" alt="" @click="copy(item.key)">
                </div>
              </div>
              <!-- <p class="rights-desc">
                <div>套餐版本： 升级版</div>
                <div>定额库：河北省</div>
                <div>授权码：1234567890 <span class="copy-icon" @click="copy('1234567890')">
                  <icon-font type="icon-fuzhi" class="icon-font"></icon-font>
                </span></div>
              </p> -->
            </template>
            <template v-if="column.key === 'str_time'">
              <span class="item">{{ getNowFormatDate(record.str_time) }}</span>
            </template>
            <template v-if="column.key === 'end_time'">
              <span class="item">{{ getNowFormatDate(record.end_time) }}</span>
            </template>
            <template v-if="column.key === 'serviceStatus'">
              <span class="item">{{ getServiceStatus(record.str_time, record.end_time) }}</span>
            </template>
          </template>
        </a-table>
        <img src="../../assets/img/portal-bg.png" alt />
      </div>
    </div>
  </div>
  <!-- <lock-renewal v-model:visible="lockVisible"></lock-renewal> -->
  <product-renewal
    v-model:visible="lockVisible"
    :isLock="propData"
  ></product-renewal>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import { requestHttp } from '@/api/main.js';
import ProductRenewal from './product-renewal.vue';
import { message, notification } from 'ant-design-vue';
const router = useRouter();
let id = Number(router.currentRoute.value.params.id);
let lockVisible = ref(false);
let propData = ref();
const columns = [
  {
    title: '资源名称',
    dataIndex: 'name',
    key: 'name',
    width: '30%',
  },
  {
    title: '权益',
    dataIndex: 'qy',
    key: 'qy',
    width: '30%',
  },
  {
    title: '授权开始时间',
    dataIndex: 'str_time',
    key: 'str_time',
    width: '15%',
  },
  {
    title: '授权结束时间',
    dataIndex: 'end_time',
    key: 'end_time',
    width: '15%',
  },
  {
    title: '状态',
    dataIndex: 'serviceStatus',
    key: 'serviceStatus',
    width: '10%',
  },
];
const info = ref({});
const list = ref([]);
const getQyShowText = (obj) => {
  const entry = Object.entries(obj)[0];
  if (entry) {
    return `${entry[0]}：${entry[1]}`;
  }
  return '';
}
const getServiceStatus = (startTime, endTime) => {
  const currentTime = Date.now();
  if (!startTime) {
    return "未授权";
  }
  // 转换为数字类型确保比较正常
  const st = Number(startTime);
  const et = Number(endTime);
  // 时间判断逻辑
  if (currentTime < st) {
    return "未开始";
  } else if (currentTime > et) {
    return "已过期";
  }
  return "服务中";
};

const getDetail = () => {
  console.log('-------id', id)
  requestHttp('controller.manager.read', { serial: id }).then((res) => {
    console.log('getDetail', res);
    let resource =res.data.info.resource.map((item)=>{
      let qy = item.qy.split(';');
      return {...item,qy};
    });
    list.value = resource;
    console.log(res);
    // getBaseInfo();
  });
};

let getBaseInfo = () => {
  requestHttp('controller.admin.getHardwareBySerial', { serial: `${id}` }).then(
    (res) => {
      if (res.data?.result) {
        let statt = getNowFormatDate(res.data.result.recDate);
        let l = list.value;
        let arr = [];
        for (let i = 0; i < l.length; i++) {
          list.value[i].recDate = statt;
        }
      }
    },
  );
};
const getNowFormatDate = (time) => {
  if(!time)return '--';
  const date = new Date(time);
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, '0');
  const day = date.getDate().toString().padStart(2, '0');
  const hours = date.getHours().toString().padStart(2, '0');
  const minutes = date.getMinutes().toString().padStart(2, '0');

  return `${year}-${month}-${day} ${hours}:${minutes}`;
};
const reset = () => {
  value1.value = 'jack';
  getDetail();
};
onMounted(() => {
  getDetail();
  // getBaseInfo();
});
const value1 = ref('jack');

const openModal = () => {
  propData.value = id;
  console.log('propData.value', propData.value);
  lockVisible.value = true;
};
const copy = (id) => {
  const input = document.createElement('input');
  input.value = id;
  document.body.appendChild(input);

  input.select();
  input.setSelectionRange(0, input.value.length); // 对于某些手机浏览器
  document.execCommand('copy');
  document.body.removeChild(input);
  message.success('复制成功');
};
</script>

<style lang="scss" scoped>
.serve-list {
  background: #f7f7f7;
  height: calc(100vh - 50px);
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 120px;
    padding: 0 32px 0 60px;
    background: url('../../assets/img/user-bg.png');
    .left {
      display: flex;
      align-items: center;
      color: #ffffff;
      .title {
        max-width: 500px;
        max-width: 600px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 30px;
      }
    }
    .detail {
      margin-left: 32px;
      font-size: 14px;
      color: #ffffff;
    }
    .desc {
      span {
        font-size: 12px;
        margin-right: 30px;
      }
      span:nth-last-of-type(1) {
        margin-right: 0;
      }
      margin-top: -27px;
    }
    .btn-list {
      .ant-btn {
        background: transparent;
        color: #ffffff;
      }
      button + button {
        margin-left: 10px;
      }
    }
  }
  .content {
    width: 100%;
    background: #ffffff;
    padding: 0 32px 0 32px;
    height: calc(100% - 120px);
    // .search {
    // 	display: flex;
    // 	justify-content: space-between;
    // 	width: 100%;
    // 	padding: 16px 0;
    // 	.info {
    // 		border: 1px solid rgba(0, 0, 0, 0.149);
    // 		height: 32px;
    // 		line-height: 32px;
    // 		width: 50%;
    // 		padding-left: 15px;
    // 		span {
    // 			font-size: 14px;
    // 			color: #333333;
    // 		}
    // 		span:nth-of-type(2) {
    // 			margin-left: 10px;
    // 			color: #898989;
    // 		}
    // 	}
    .table-title {
      padding: 15px 0;
      font-weight: bold;
    }
    .detail-content {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: calc(100% - 96px);
      img {
        width: 100%;
      }
      :deep(.ant-table) {
        // border: 1px solid #b9b9b9;
        border-color: #b9b9b9;
        .ant-table-thead {
          line-height: 10px;
        }
        .ant-table-thead > tr > th {
          background: rgba(243, 243, 243, 1);
        }
      }
      .rights-desc {
        margin: 10px 0px 0px;
      }
      .copy-icon {
        cursor: pointer;
        width: 12px;
        margin-left: 6px;
      }
      .qy-text, .auth-code {
        padding: 4px 0px;
        margin: 0px;
      }
      .auth-code {
        font-size: 12px;
        color: #a1a1a1;
        display: flex;
        align-items: center;

      }
    }
  }
}
</style>
<style>
.tableRow {
  height: 32px;
  line-height: 10px;
}
.ant-table-thead > tr > th {
  background: rgba(243, 243, 243, 1);
}
.ant-table-bordered {
  height: 260px;
  overflow-y: scroll;
}
.item {
  line-height: 1.3
}
</style>
